<template>
  <el-dialog
    title="修改站点信息"
    :visible.sync="dialogVisible"
    width="808px"
    class="dialogTitle"
    @closed="dialogClosed('alterForm')"
  >
    <el-form label-width="120px" ref="alterForm" :model="dialogData" :rules="rules">
      <el-form-item label="站点名称" prop="siteName">
        <el-input v-model.trim="dialogData.siteName"></el-input>
      </el-form-item>
      <!-- <el-form-item label="站点编码" prop="siteNumber">
        <el-input v-model.trim="dialogData.siteNumber"></el-input>
      </el-form-item> -->
      <el-form-item label="所属企业" prop="enterprise">
        <el-select v-model="dialogData.enterprise" class="form-select" clearable>
          <el-option
            v-for="item in dialogData.enterpriseOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点简称" prop="siteAbbreviation">
        <el-input v-model.trim="dialogData.siteAbbreviation"></el-input>
      </el-form-item>
      <!-- <el-form-item label="站点类型" prop="siteTypeValue">
        <el-select class="form-select" v-model="dialogData.siteTypeValue" clearable>
          <el-option
            v-for="item in dialogData.siteType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="超重设备" prop="overWeightEquipment">
        <el-select class="form-select" v-model="dialogData.overWeightEquipment" clearable>
          <el-option
            v-for="item in dialogData.overWeightEquipmentOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model.trim="dialogData.phone"></el-input>
      </el-form-item>
      <el-form-item label="位置" prop="location" class="addressForm">
        <label slot="label">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</label>
        <el-input v-model.trim="dialogData.location"></el-input>
        <el-button @click="alterCoordinate" type="primary">修改经纬度</el-button>
      </el-form-item>
      <el-form-item label="经度" prop="longitude" class="addressForm">
        <label slot="label">经&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</label>
        <el-input v-model.trim="dialogData.longitude" :disabled="true"></el-input>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="dialogData.longitude = ''"
        ></el-button>
      </el-form-item>
      <el-form-item label="纬度" class="spacingL addressForm" prop="latitude">
        <label slot="label">纬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</label>
        <el-input v-model.trim="dialogData.latitude" :disabled="true"></el-input>
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="dialogData.latitude = ''"
        ></el-button>
      </el-form-item>
      <!-- <el-form-item label="检测方向" prop="detectionDirection">
        <el-input v-model.trim="dialogData.detectionDirection"></el-input>
      </el-form-item> -->
      <el-form-item label="站点负责人" prop="siteAgent">
        <el-input v-model.trim="dialogData.siteAgent"></el-input>
        <!-- <el-select class="form-select" v-model="dialogData.siteAgent" clearable>
          <el-option
            v-for="item in dialogData.siteAgentOption"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="车道数量" prop="lanesNumber">
        <el-input type="number" v-model.trim="dialogData.lanesNumber"></el-input>
      </el-form-item>
      <!-- <el-form-item label="网关ID" prop="productKey">
        <el-input v-model.trim="dialogData.productKey"></el-input>
      </el-form-item>
      <el-form-item label="网关sip编码" prop="sipId">
        <el-input v-model.trim="dialogData.sipId"></el-input>
      </el-form-item> -->
    </el-form>
    <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick('alterForm')"
        btnText="确定"
        class="confirm_btn dialog_btn"
        :buttonStatus="buttonStatus"
      />
      <cs-btn @click.native="cancelBtnClick('alterForm')" btnText="取消" class="dialog_btn" />
    </div>
  </el-dialog>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'

import { alterSite, searchSiteName } from '@/service/operate/site_manage/site_manage'
import { getAllEnterpriseName } from '@/service/source_manage/enterprise_manage'
// import { getAllDeviceName } from '@/service/device_manage/device_manage'
// import { getContactsName } from '@/service/operate/user_manage/user_manage'
import { isPhoneCorrect } from '@/utils/regularVerification'

export default {
  components: {
    csBtn
  },
  data() {
    // 自定义校验规则
    const isSiteNumRepeat = async (rule, value, callback) => {
      if (this.rowSiteName === value) {
        callback()
      } else {
        try {
          // 查询车牌号是否重复
          const { code,data } = await searchSiteName({ siteName: value })
          if (code === 0) {
            callback()
          } else {
            callback(new Error('站点名称已存在'))
          }
        } catch (err) {
          console.log(err)
          this.$message.error('服务器出错了')
        }
      }
    }
    const phoneCorrectVerification = async (rule, value, callback) => {
      // 验证车牌号是否正确
      if (value) {
        if (isPhoneCorrect(value)) {
          callback()
        } else {
          callback(new Error('请输入正确格式的手机号'))
        }
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      rowSiteName: '',
      buttonStatus: false,
      dialogData: {
        id: '',
        siteName: '',
        // siteNumber: '',
        enterprise: '',
        enterpriseOption: [],
        siteAbbreviation: '',
        siteType: [
          {
            value: '0',
            label: '所有'
          },
          {
            value: '1',
            label: '快速动态检测站'
          },
          {
            value: '2',
            label: '固定点'
          },
          {
            value: '3',
            label: '收费站'
          }
        ],
        // siteTypeValue: '',
        // overWeightEquipment: '',
        // overWeightEquipmentOption: [],
        phone: '',
        location: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: '',
        // 检测方向
        // detectionDirection: '',
        siteAgent: '',
        // siteAgentOption: [],
        // 车道数量
        lanesNumber: '',
        productKey: '',
        sipId: ''
      },
      rules: {
        siteName: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          { validator: isSiteNumRepeat, trigger: 'blur' }
        ],
        enterprise: [{ required: true, message: '请选择所属企业', trigger: 'blur' }],
        // siteTypeValue: [{ required: true, message: '请选择站点类型', trigger: 'blur' }],
        // overWeightEquipment: [{ required: true, message: '请选择超重设备', trigger: 'blur' }],
        phone: [{ validator: phoneCorrectVerification, trigger: 'blur' }],
        siteAgent: [{ required: true, message: '请输入站点负责人', trigger: 'blur' }],
        productKey: [{ required: true, message: '请输入网关Id', trigger: 'blur' }],
        sipId: [{ required: true, message: '请输入网关sip编码', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.$bus.$on('alterSiteDialogVisible', (row) => {
      console.log(row)
      this.dialogData.id = row.id
      this.dialogData.siteName = row.name
      this.rowSiteName = row.name
      // this.dialogData.siteNumber = row.siteCode
      this.dialogData.enterprise = row.companyName
      this.dialogData.siteAbbreviation = row.siteAlias
      // this.dialogData.siteTypeValue = row.type
      // this.dialogData.overWeightEquipment = row.deviceName
      this.dialogData.phone = row.phone
      this.dialogData.location = row.location
      this.dialogData.longitude = row.longitude
      this.dialogData.latitude = row.latitude
      // this.dialogData.detectionDirection = row.checkDirection
      this.dialogData.siteAgent = row.siteAgent
      this.dialogData.lanesNumber = row.laneNum
      this.dialogData.productKey = row.productKey
      this.dialogData.sipId = row.sipId
      this.dialogVisible = true
    })
    // 获取所有企业名称
    this.getAllEnterpriseName()
    // 获取所有设备名称
    // this.getAllDeviceName()
    // 查询所有站点负责人
    // this.getContactsName()
    this.$bus.$on('confirmCoordinate', (lng, lat, address) => {
      this.dialogData.location = address
      this.dialogData.longitude = lng
      this.dialogData.latitude = lat
    })
  },
  beforeDestroy() {
    console.log('修改对话框销毁')
    this.$bus.$off('showMap_site')
    this.$bus.$off('alterSiteSuccess')
  },
  methods: {
    alterCoordinate() {
      this.$bus.$emit('showMap_site', this.dialogData.location ? this.dialogData.location : '')
    },
    // 对话框关闭事件
    dialogClosed(formName) {
      this.resetForm(formName)
    },
    confirmBtnClick(formName) {
      this.buttonStatus = true
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const { code,data } = await alterSite({
              id: this.dialogData.id,
              name: this.dialogData.siteName,
              // siteCode: this.dialogData.siteNumber,
              companyName: this.dialogData.enterprise,
              siteAlias: this.dialogData.siteAbbreviation,
              type: 0,
              // deviceName: this.dialogData.overWeightEquipment,
              phone: this.dialogData.phone,
              location: this.dialogData.location,
              longitude: this.dialogData.longitude,
              latitude: this.dialogData.latitude,
              checkDirection: '出厂方向',
              siteAgent: this.dialogData.siteAgent,
              laneNum: this.dialogData.lanesNumber
              // productKey: this.dialogData.productKey,
              // sipId: this.dialogData.sipId
            })
            console.log(data)
            if (code === 0) {
              this.$message({
                message: '修改站点成功',
                type: 'success'
              })
              this.$bus.$emit('alterSiteSuccess')
              this.dialogVisible = false
              setTimeout(() => {
                this.buttonStatus = false
              }, 500)
              this.resetForm(formName)
            }
          } catch (err) {
            console.log(err)
            this.$message.error('编辑站点信息失败')
          }
        } else {
          this.buttonStatus = false
        }
      })
    },
    cancelBtnClick(formName) {
      this.dialogVisible = false
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 获取所有企业名称
    async getAllEnterpriseName() {
      try {
        const { code,data } = await getAllEnterpriseName()
        console.log(data)
        if (code === 0) {
          data.forEach((item) => {
            // 拼接所属企业选项
            this.dialogData.enterpriseOption.push({
              value: item,
              label: item
            })
          })
        }
      } catch (err) {
        console.log(err)
        this.$message.error('服务器出错了')
      }
    }
    // 查询所有设备名称
    // async getAllDeviceName() {
    //   try {
    //     const { data } = await getAllDeviceName()
    //     console.log(data)
    //     if (data.code === 0) {
    //       const newDeviceData = data.data
    //       newDeviceData.forEach((item) => {
    //         // 拼接超重设备选项
    //         this.dialogData.overWeightEquipmentOption.push({
    //           value: item,
    //           label: item
    //         })
    //       })
    //     }
    //   } catch (err) {
    //     console.log(err)
    //     this.$message.error('服务器出错了')
    //   }
    // },
    // 查询所有站点负责人
    // async getContactsName() {
    //   try {
    //     const { data } = await getContactsName()
    //     if (data.code === 0) {
    //       // 遍历所有责任人数据，组成下拉框选项数据
    //       data.data.forEach((item) => {
    //         this.dialogData.siteAgentOption.push({ value: item, label: item })
    //       })
    //     }
    //   } catch (err) {
    //     console.log(err)
    //     this.$message.error('服务器出错了')
    //   }
    // }
  }
}
</script>

<style scoped>
/* 对话框样式start */
/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.el-form-item >>> .el-form-item__label {
  padding: 0;
  padding-right: 30px;
  color: #888888;
}

.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}

.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.form-select {
  width: 100%;
}

.addressForm >>> .el-form-item__content {
  display: flex;
}

.addCoordinateBtn {
  width: 90px;
  margin-top: 3px;
  margin-left: 10px;
  margin-right: 0;
}
/* 对话框样式end */
</style>
